<template>
  <div>
    <div class="app-container calendar-list-container">
      <el-row>
        <el-col :span="24">
          <div>
            <TableFrom :list="table.list"
                       @handleSelectionChange="handleSelectionChange"
                       :options="options"
                       :columns="table.columns"
                       :operates="operates"
                       :formItems="formItems"
                       :tabFrom="tabFrom"
                       :pagination="pagination"
                       ref="privateRoomCategory"
                       @submit="handleSubmit"
                       @batchSubmit="batchDataClick"
                       @handleSizeChange="handleSizeChange"
                       @handleCurrentChange="handleCurrentChange"
                       @newAdd="newAdd">
            </TableFrom>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="product">
      <CustomColumn :show.sync="showCustomColumn"
                    localName="privateRoomCategory"
                    :baseColumns="columns"
                    :defaultColumns="defaultColumns"
                    :columns.sync="table.columns" />
    </div>
  </div>
</template>

<script>
import TableFrom from '@/components/packages/publicTable.vue';
export default {
  name: 'privateRoomCategory',
  components: {
    TableFrom,
  },
  data() {
    return {
      title: '',
      showCustomColumn: false,
      showDrawer: false,
      batchDelete: [], //删除用户的id
      table: {
        list: [],
        columns: [],
      },
      list: [], // table数据
      listParm: {
        page: 1,
        size: 10,
        start: '',
        end: '',
        categoryName: '',
      },
      options: {
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        indexList: true,
        page: true,
        mutiSelect: true, // 是否支持列表项选中功能
      }, // table 的参数
      //表头操作
      tabFrom: {
        selectButton: true, //是否展示查询按钮
        newAdd: true,
        batch: true, //是否展示批量删除按钮
        batchDisabled: true, //批量删除按钮是否置灰
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
      },
      defaultColumns: ['categoryName', 'sequence', 'createdAt'],
      columns: [
        {
          key: 'categoryName',
          label: '类别名称',
          align: 'center',
          prop: 'categoryName',
        },
        {
          key: 'sequence',
          label: '显示顺序',
          align: 'center',
          prop: 'sequence',
        },
        {
          key: 'createdAt',
          label: '创建时间',
          align: 'center',
          prop: 'createdAt',
        },
      ], // 需要展示的列
      formData: {
        billingName: '',
        ruleType: '',
        ruleTime: '',
        ruleMoney: '',
        timeoutMoney: '',
        timeoutFreeTime: '',
        nightServeMoney: '',
        nightServeStart: '',
        nightServeStop: '',
        nightServeFreeTime: '',
      },
      operates: {
        width: 150,
        list: [
          {
            id: '1',
            label: '编辑',
            style: 'cursor:pointer;color: #409eff;',
            show: true,
            class: 'el-icon-edit',
            plain: true,
            method: (scope, row) => {
              this.handleEdit(row.id);
            },
          },
          {
            id: '2',
            label: '删除',
            style: 'cursor:pointer;color: #b3450e;',
            class: 'el-icon-delete',
            show: true,
            plain: false,
            method: (index, row) => {
              this.handleDel(row.id);
            },
          },
        ],
      }, // 列操作按钮
    };
  },
  mounted: function () {
    var _this = this;
    this.getList(1, this.pagination.pageSize);
    window.bus.$on('blogTableReload', function () {
      _this.getList(_this.pagination.currentPage, _this.pagination.pageSize);
    });
  },
  methods: {
    // 选中行
    handleSelectionChange(val) {
      this.batchDelete = val;
      if (this.batchDelete.length > 0) {
        this.tabFrom.batchDisabled = false;
      } else {
        this.tabFrom.batchDisabled = true;
      }
    },
    //单条删除
    async handleDel(index) {
      var _this = this;
      const confirmResult = await this.$messageIndex.MessageBoxQuestion(
        '删除后将无法逆转，是否继续？'
      );
      if (confirmResult) {
        _this.batchDelete.push(index);
        _this.deleteRow();
      }
    },
    //批量删除按钮点击
    async batchDataClick(val) {
      if (val) {
        var _this = this;
        const confirmResult = await this.$messageIndex.MessageBoxQuestion(
          '删除后将无法逆转，是否继续？'
        );
        if (confirmResult) {
          let deleteData = this.batchDelete.map((item) => {
            const id = item.id;
            return id;
          });
          this.batchDelete = deleteData;
          _this.deleteRow();
        }
      }
    },
    //删除执行
    async deleteRow() {
      var _this = this;
      let requestData = {
        ids: _this.batchDelete,
      };
      let res = await this.$api.tollRuleApi.delete(requestData, {
        loadingTime: 100,
        loadingText: '数据执行中...',
      });
      if (!res.msg) {
        this.$messageIndex.Notice('成功', '计费规则删除成功', 'success');
      } else {
        this.$messageIndex.Notice('错误', res.msg + '--删除失败', 'error', '0');
      }
      this.batchDelete = [];
      this.getList(_this.pagination.currentPage, _this.pagination.pageSize);
    },
    getButtonInfo(status) {
      let buttonName = '';
      let buttonType = '';

      switch (status) {
        case 0:
          buttonName = '正常';
          buttonType = 'success';
          break;
        case 1:
          buttonName = '异常';
          buttonType = 'danger';
          break;
        // 其他状态的处理逻辑
        default:
          break;
      }

      return { buttonName, buttonType };
    },
    customArr(val) {
      this.showCustomColumn = true;
    },
    search() {
      this.getList(1, this.pagination.pageSize);
    },
    handleSubmit(formDataInfo) {
      var _this = this;
      _this.listParm = formDataInfo;
      _this.getList(1, this.pagination.pageSize);
    },

    async getList(page, size) {
      var _this = this;
      if (page) _this.listParm.page = page;
      if (size) _this.listParm.size = size;
      let res = await this.$api.tableCategoryApi.list(_this.listParm, {
        loadingTime: 100,
        loadingText: '数据加载中...',
      });
      if (res) {
        this.table.list = res.records;
        this.pagination.currentPage = res.current;
        this.pagination.totalCount = res.total;
      }
    },
    /**
     * 新增按钮触发
     */
    async newAdd(val) {
      this.title = '新增计费规则';
      // this.getSelectValue();
      if (val) {
        this.showDrawer = true;
      }
    },
    async add() {
      let res;
      var _this = this;
      if (await this.validateData()) {
        if (this.title == '新增计费规则') {
          res = await this.$api.tollRuleApi.add(_this.formData, {
            loadingTime: 100,
            loadingText: '数据执行中...',
          });
        } else {
          res = await this.$api.tollRuleApi.update(_this.formData, {
            loadingTime: 100,
            loadingText: '数据执行中...',
          });
        }
        if (res.code == 200) {
          await this.$messageIndex.Notice(
            '成功',
            this.title + '成功',
            'success'
          );
          this.showDrawer = false;
          this.getList(1, this.pagination.pageSize);
        } else {
          this.$messageIndex.Notice(
            '错误',
            this.title + '失败：' + res.msg + '',
            'error',
            '0'
          );
          return false;
        }
      }
    },
    /**
     * 校验数据
     */
    async validateData() {
      return new Promise((resolve, reject) => {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            resolve(true);
          } else {
            resolve(false);
          }
        });
      });
    },
    /**
     * 编辑按钮出发
     **/
    async handleEdit(val) {
      this.title = '编辑计费规则';
      // this.getSelectValue();
      if (val) {
        this.showDrawer = true;
      }
      let res = await this.$api.tollRuleApi.byId(
        { id: val },
        {
          loadingTime: 100,
          loadingText: '数据加载中...',
        }
      );
      if (res) {
        this.formData = res;
      }
      this.$forceUpdate();
    },
    handleSizeChange(val) {
      this.listParm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParm.page = val;
      this.getList();
    },
    resetForm() {
      this.$refs.formData.resetFields();
    },
  },
};
</script>
<style scoped lang="less">
.drawer /deep/ .el-drawer__header {
  background-color: rgb(255, 255, 255);
  flex: none;
  padding: 0px 20px;
  height: 50px;
  color: #000000;
  margin-bottom: 0px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
}
.drawer /deep/ .el-drawer__title {
  font-size: 20px;
}
.form /deep/ .el-form-item__label {
  color: black;
}
.form /deep/ .el-input__inner {
  width: 70%;
}
.drawer /deep/ .demo-drawer__content {
  margin-top: 10px;
}
</style>
<style>
.drawer-button {
  position: absolute;
  right: 10%;
}
/* .centered-label {
   text-align: right;
} */
</style>
